<template>
  <el-row>
    <el-col>
      <el-card class="box-card-component" style="margin-left:10px;">
        <el-row>
          <el-col :span="9">
            <el-row>
              <div class="box-card-plate">
                车牌号：<span v-if="form && plateCamera && plateCamera.color == '绿'" class="box-card-green">{{ form.plateNumber }}</span>
                <span v-if="form && plateCamera && plateCamera.color == '蓝'" class="box-card-blue">{{ form.plateNumber }}</span>
                <span v-if="form && (!plateCamera || plateCamera.color =='' || !(plateCamera.color == '绿' || plateCamera.color == '蓝'))" class="box-card-black">{{ form.plateNumber }}</span>
              </div>
            </el-row>
            <el-row>
              <el-col class="box-card-plate2">
                上次离场时间：<div v-if="form" class="box-card-green">{{ form.leaveTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="box-card-plate2">
                离场位置：<span v-if="form" class="box-card-green">{{ form.parkingNo | parkingNoFilter }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="box-card-plate2">
                返场耗时<div v-if="form" class="box-card-green">{{ form.diffTime }}</div><div>分钟</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="box-card-plate">
                <div v-if="form.recType == 1" class="box-card-green"><span v-if="form.refuseType == 10">白名单</span><span>通过</span></div>
                <div v-if="form.recType == 2" class="box-card-red"><span v-if="form.setValue && form.setValue !== ''">{{ form.setValue.replace('核验失败','') }}</span>
                  <span v-else>拒绝</span>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="15">
            <el-row>
              <el-col :span="12">
                <el-image v-if="platePhoto" :src="platePhoto" style="width:230px;height:230px;" :preview-src-list="platePhotoArray" />
                <img v-else src="@/assets/nopic.png" style="width:230px;height:230px;">
              </el-col>
              <el-col :span="12">
                <el-image v-if="platePhoto2" :src="platePhoto2" style="width:230px;height:230px;" :preview-src-list="platePhotoArray2" />
                <img v-else src="@/assets/nopic.png" style="width:230px;height:230px;">
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card-component" style="margin-left:10px;">
        <div class="box-card-plate">
          最近一次订单信息
        </div>
        <div v-if="order">
          <el-row>
            <el-col :span="12" class="box-card-plate2">
              <div>开始时间：</div><div v-if="form && form.recType == 2 && form.refuseType == 4" class="box-card-red">{{ order.beginTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
              <div v-if="form && !(form.recType == 2 && form.refuseType == 4)" class="box-card-green">{{ order.beginTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
            </el-col>
            <el-col :span="12" class="box-card-plate2">
              <div>结束时间：</div><div v-if="form && form.recType == 2 && form.refuseType == 4" class="box-card-red">{{ order.endTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
              <div v-if="form && !(form.recType == 2 && form.refuseType == 4)" class="box-card-green">{{ order.endTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="box-card-plate2">
              <div>订单里程：</div><div v-if="form && form.recType == 2 && form.refuseType == 5" class="box-card-red">{{ order.distance }}</div>
              <div v-if="form && !(form.recType == 2 && form.refuseType == 5)" class="box-card-green">{{ order.distance }}</div>
              <div>公里</div>
            </el-col>
          </el-row>
        </div>
        <div v-else class="box-card-plate">
          <div class="box-card-red">无</div>
        </div>
      </el-card>
      <el-card class="box-card-component" style="margin-left:10px;">
        <div>
          <el-row>
            <el-col>
              <el-row>
                <el-col :span="12" class="box-card-plate2">
                  <div>已优惠次数：</div><div class="box-card-red">{{ allowCount }}</div><div>次</div>
                </el-col>
                <el-col :span="12" class="box-card-plate2">
                  <div>白名单次数：</div><div v-if="discountNum && discountNum.discountNum > 0" class="box-card-red">{{ discountNum.discountNum }}</div>
                  <div v-else class="box-card-green">0</div><div>次</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card-component" style="margin-left:10px;">
        <el-table :data="list2" fit style="width: 100%;font-weight: bold;" :cell-style="{border:'0px' }">
          <el-table-column label="车牌号" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.plateNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="离场时间" align="center">
            <template slot-scope="{ row }">
              <span> {{ row.returnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="优先通道时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.turnTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单开始时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.beginTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单里程" align="center" width="80">
            <template slot-scope="{ row }">
              <span> {{ row.distance }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getBoardById } from '@/api/board';

var that;

export default {
  filters: {
    recTypeFilter(item) {
      const recTypeKeyValue = that.recTypeOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.label;
        return acc;
      }, {});
      return recTypeKeyValue[item];
    },
    parkingNoFilter(item) {
      const parkingNoKeyValue = that.parkingNoOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.label;
        return acc;
      }, {});
      return parkingNoKeyValue[item];
    }
  },
  props: {
    id: {
      type: Number,
      default: null
    },
    group: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      query: {
        id: null,
        groupName: ''
      },
      form: {},
      plateCamera: {},
      order: {},
      discountNum: {},
      turnstileData: {},
      list2: [],
      recTypeOptions: [{ label: '通过', key: 1 }, { label: '拒绝', key: 2 }],
      parkingNoOptions: [{ label: '南蓄', key: 0 }, { label: '北蓄', key: 1 }],
      platePhoto: '',
      platePhotoArray: [],
      platePhoto2: '',
      platePhotoArray2: [],
      allowCount: 0
    }
  },
  created() {
    that = this;
    this.query.id = this.id;
    this.query.groupName = this.group;
    this.fetchData();
  },
  methods: {
    fetchData() {
      getBoardById(this.query).then(res => {
        this.plateCamera = res.data.plateCamera;
        if (this.plateCamera && this.plateCamera.photoUrl && this.plateCamera.photoUrl !== '') {
          this.platePhoto = this.plateCamera.photoUrl + '?_=' + new Date().getTime();
          this.platePhotoArray.push(this.platePhoto);
          this.platePhoto2 = this.plateCamera.photoUrl.replace('Pictype_1', 'Pictype_0') + '?_=' + new Date().getTime();
          this.platePhotoArray2.push(this.platePhoto2);
        } else {
          this.platePhoto = '';
          this.platePhotoArray = [];
          this.platePhoto2 = '';
          this.platePhotoArray2 = [];
        }
        this.order = res.data.order;
        this.discountNum = res.data.discountNum;
        this.allowCount = res.data.allowCount;
        this.turnstileData = res.data.turnstileData;
        var form2 = {}
        this.list2 = []
        this.form = res.data.shortDistanceDto;
        form2.plateNumber = this.form.plateNumber;
        form2.returnTime = this.form.leaveTime;
        form2.turnTime = this.form.returnTime;
        if (this.order) {
          form2.beginTime = this.order.beginTime;
          form2.distance = this.order.distance + '公里';
        }
        this.list2.push(form2);
        if (this.form.refuseType === 3 || this.form.recType === 1) {
          if (this.form.leaveTimeLast && this.form.returnTimeLast) {
            for (var n = 0; n < this.form.leaveTimeLast.length; n++) {
              var form3 = {}
              form3.plateNumber = this.form.plateNumber;
              form3.returnTime = this.form.leaveTimeLast[n];
              form3.turnTime = this.form.returnTimeLast[n];
              this.list2.push(form3);
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card-component {
  .box-card-plate {
    padding-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
  }
  .box-card-plate2 {
    padding-bottom: 15px;
    font-weight: bold;
    display: flex;
  }
  .box-card-green {
    font-weight: bold;
    color: #00aa00;
  }
  .box-card-red {
    font-weight: bold;
    color: #ff0000;
  }
  .box-card-blue {
    font-weight: bold;
    color: #0000ff;
  }
  .box-card-black {
    font-weight: bold;
    color: #000000;
  }
}
</style>
